<script lang="ts" setup>
defineProps(["heroId","heroName","imgUrl"])

defineEmits(["imgClick"])
</script>
<template>
    <div class="hero-item">
        <el-image style="width: 150px; height: 150px" :src="imgUrl" fit="fill" @click="$emit('imgClick',heroId)" />
        <span class="hero-name">{{heroName}}</span>
    </div>
</template>
<style lang="less" scoped>
.hero-item {
    margin: 10px;
    padding: 5px;
    border: 2px solid rgb(21, 20, 20);
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .hero-name{
        font-size: 15px;
        margin-top: 10px;
    }
}
</style>